<template>
    <div style="font-size:16px;font-weight: 600;"> <el-radio></el-radio>观众来源统计</div>
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" style="margin-top: 10px;">
        <el-form-item>
            <el-select placeholder="请选择展会" v-model="state.dataForm.tid2" clearable filterable
                @change="handleTemplateChange">
                <el-option v-for="option in templates" :key="option.id" :label="option.template"
                    :value="option.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-select placeholder="请选择分组" v-model="state.dataForm.gid" clearable>
                <el-option v-for="option in groupList" :key="option.id" :label="option.groupName"
                    :value="option.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-select placeholder="请选择来源" v-model="state.dataForm.ly" filterable clearable>
                <el-option v-for="option in state.lys" :key="option.id" :label="option.remark" :value="option.ly">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-date-picker type="date" placeholder="开始日期" style="width: 220px"></el-date-picker>
        </el-form-item>
        <el-form-item label-width="0px">
            <el-date-picker type="date" placeholder="结束日期" style="width: 220px"></el-date-picker>
        </el-form-item>
        <!-- 查看历史展会 -->
        <el-form-item>
            <el-select placeholder="请选择历史展会" v-model="state.dataForm.historySelectedId" clearable filterable
                style="width: 200px;" @change="handleHistoryExhibitionChange">
                <el-option v-for="option in history" :key="option.id" :label="option.template"
                    :value="option.id"></el-option>
            </el-select>
        </el-form-item>
        <!--查询 -->
        <el-form-item v-if="state.hasPermission('nocly:statistics:info')">
            <el-button type="primary" @click="state.getDataList()">{{ $t("query") }}</el-button>
        </el-form-item>
        <!-- 导出 -->
        <el-form-item v-if="state.hasPermission('nocly:statistics:export')">
            <el-button  @click="state.exportHandle()">{{ $t("export") }}</el-button>
        </el-form-item>
        <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
            v-loading="state.dataListLoading" :data="state.dataList" border
            @selection-change="state.dataListSelectionChangeHandle" style="width: 100%;margin-top: 15px">
            <el-table-column align="center" prop="" label="来源" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="" label="观众报名人数" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="" label="观众到场人数" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="" label="观众到场百分比" show-overflow-tooltip></el-table-column>
        </el-table>
    </el-form>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
        :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
        @current-change="state.pageCurrentChangeHandle"> </el-pagination>
</template>
<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import { useRouter } from 'vue-router'
import baseService from "@/service/baseService";
import { ElMessage, ElMessageBox } from 'element-plus'

const view = reactive({
    getDataListURL: '',
    getDataListIsPage: true,
    deleteURL: "noc/nocly/delete",
    deleteIsBatch: true,
    dataForm: {
        tid2: '' as any,
        tid: '' as any, //展会名称
        gid: '', //分组
        id: "",
        remark: "",
        ly: "",
        historySelectedId: "" as any,
    },
    lys: null as any,
    lylist: ''
});

const init = () => {
    getGroup();
    getTemplates();
    getHistory()
};

// 处理展会选择变化的函数
const handleTemplateChange = (tid: number) => {
    state.dataForm.tid = tid;
    state.dataForm.historySelectedId = null;
};

//选择历史展会
const handleHistoryExhibitionChange = (tid: number) => {
    state.dataForm.tid = tid;
    state.dataForm.tid2 = null;
}
//展会来源统计
const getLys = (templateId: number) => {
    baseService.post("noc/nocly/list2?limit=1000&tid=" + templateId + "&gid=" + state.dataForm.gid).then((r) => {
        if (r.code == 0) {
            state.lys = "";
            state.lys = r.data.list;
            if (state.dataForm.ly == null || state.dataForm.ly == "") {
                state.lylist = "";
                for (var i = 0; i < r.data.list.length; i++) {
                    state.lylist = state.lylist.concat("," + r.data.list[i].ly)
                }
            } else {
                state.lylist = "";
            }
        }
    });
};

//展会名称列表
const templates = ref<any[]>([]);
const getTemplates = () => {
    baseService.get('/crm/noctemplate/list', { limit: 300 }).then((res) => {
        if (res.code == 0) {
            //刷新
            templates.value = res.data;
        }
    });
};

//分组列表
const groupList = ref<any[]>([]);
const getGroup = () => {
    baseService.post('/noc/noclygroup/list', { limit: 100 }).then((res) => {
        if (res.code == 0) {
            //刷新
            groupList.value = res.data.list;
        }
    });
};


//历史展会名称
const history = ref<any[]>([]);
const getHistory = () => {
    baseService.get('/crm/noctemplate/listExpireByRole').then((res) => {
        if (res.code == 0) {
            //刷新
            history.value = res.data;
        }
    });
};

const state = reactive({ ...useView(view), ...toRefs(view) });

init();
</script>
